<template>
  <div v-if="hasParam">
    <el-form label-width="100px" label-position="left">
      <template v-for="(item, index) in param">
        <el-form-item :label="item.dataSetNameLabel" :key="index">
          <el-select
            size="mini"
            v-model="dataIdArr[index].dataSetNameId"
            filterable
            placeholder="请选择"
            clearable=""
            @change="selectDataSetName($event, index)"
          >
            <el-option
              v-for="item in dataSetName"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="item.dataIdLabel">
          <el-select
            size="mini"
            v-model="dataIdArr[index].dataId"
            filterable
            placeholder="请选择"
            clearable=""
            @change="selectDataId($event, index)"
          >
            <el-option
              v-for="(item, index) in dataArr[index]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button
          v-if="index == 4"
          style="width: 100%; margin-top: 5px; margin-bottom: 5px"
          type="primary"
          plain
          size="mini"
          @click="saveDataBtn"
          >刷新显示</el-button
        >
      </template>
    </el-form>
  </div>

  <div v-else>
    <el-form label-width="100px" label-position="left">
      <el-form-item label="数据类别">
        <el-select
          size="mini"
          v-model="dataSetNameId"
          filterable
          placeholder="请选择"
          @change="selectDataSetName"
        >
          <el-option
            v-for="item in dataSetName"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="数据ID">
        <el-select
          size="mini"
          v-model="dataId"
          filterable
          placeholder="请选择"
          @change="selectDataId"
        >
          <el-option
            v-for="item in data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button
        style="width: 100%; margin-top: 5px; margin-bottom: 5px"
        type="primary"
        plain
        size="mini"
        @click="saveDataBtn"
        >刷新显示</el-button
      >
    </el-form>
  </div>

  <!-- <div v-else>
    <el-form label-width="100px" label-position="left">
      <el-form-item label="数据类别">
        <el-select
          size="mini"
          v-model="selectid1"
          filterable
          placeholder="请选择"
          @change="selectChang"
        >
          <el-option
            v-for="item in selectList1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="数据ID">
        <el-select
          size="mini"
          v-model="selectid2"
          filterable
          placeholder="请选择"
          @change="selectDataId"
        >
          <el-option
            v-for="item in selectList2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-button
        style="width: 100%; margin-top: 5px; margin-bottom: 5px"
        type="primary"
        plain
        size="mini"
        @click="saveDataBtn"
        >刷新显示</el-button
      >
    </el-form>
  </div> -->
</template>
<script>
import store from "@/store/index.js";
import { logInfo } from "@/utils/log.js";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "DynamicComponents",
  model: {
    prop: "formData",
    event: "input",
  },
  props: {
    chartType: String,
    formData: Object,
    param: Array,
  },
  data() {
    return {
      dataSetNameId: "",
      dataId: "",
      data: [],

      dataIdArr: [],
      dataArr: [],

      dataSetName: store.state.dataSetName, // 数据集

      chartProperties: {},
      hasParam: false,

      selectid1: "",
      selectList1: [],
      selectid2: "",
      selectList2: [],
      mySpecialId: "", //判断的后台返回的id
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.echoDataSet(val);
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    // console.log(this.hasParam(1), "hasparam");
    // console.log("页面初始化", this.formData, this.chartType, this.param);
    // console.log(this.dataSetName, "数据类别");
    // console.log(store.state.dataSet["gw"]);
    // console.log(store.state.data, "data vux");
    this.selectList1 = [];
    let selectlist = store.state.dataSet["gw"];
    let list = [{ name: "全选", id: "all" }];
    selectlist.forEach((e) => {
      list.push(e);
    });
    this.selectList1 = list;
  },
  mounted() {
    setMessageCallback(this.onMessage);
    this.echoDataSet(this.formData);
    // console.log(this.formData, "dynamicComponents----");
  },
  methods: {
    // hasParam(key) {
    //   let ishas = false;
    //   let that = this;
    //   let obj= {

    //   }
    //   switch (key) {
    //     case 1:
    //       that.ishas = true;
    //       break;
    //     case 2:
    //       that.ishas = true;
    //       break;
    //     case 3:
    //       that.ishas = true;
    //       break;
    //     default:
    //       break;
    //   }
    //   return ishas;
    // },
    echoDataSet(val) {
      this.dataId = "";
      this.dataSetNameId = "";
      // debugger;
      // console.log("dynamicComponents 数据有变化 val=", val);
      // console.log("this.param=", this.param);
      if (this.param != null && this.param.length > 0) {
        this.hasParam = true;
      }
      if (!this.hasParam) {
        // console.log(this.hasParam, "hasparam");
        if (val.hasOwnProperty("chartProperties")) {
          if (val.chartProperties.hasOwnProperty("dataSetNameId")) {
            this.dataSetNameId = val.chartProperties.dataSetNameId;
            this.chartProperties["dataSetNameId"] =
              val.chartProperties.dataSetNameId;
            this.data = store.state.dataSet[this.dataSetNameId];
            this.selectid1 = val.chartProperties.dataSetNameId;
            // this.getSelectList(val.chartProperties.dataSetNameId);
          }
          if (val.chartProperties.hasOwnProperty("dataId")) {
            this.chartProperties["dataId"] = val.chartProperties.dataId;
            this.dataId = val.chartProperties.dataId;
            this.selectid2 = val.chartProperties.dataId;
          }
        }
      } else {
        if (val.hasOwnProperty("chartProperties")) {
          // console.log(val.chartProperties);

          while (this.dataIdArr.length < 5) {
            let cfg = { dataSetNameId: "", dataId: "" };
            this.dataIdArr.push(cfg);
          }
          this.dataIdArr = val.chartProperties;
          for (let i = 0; i < this.dataIdArr.length; i++) {
            this.dataArr[i] =
              store.state.dataSet[this.dataIdArr[i].dataSetNameId];
          }
        } else {
          while (this.dataIdArr.length < 5) {
            let cfg = { dataSetNameId: "", dataId: "" };
            this.dataIdArr.push(cfg);
          }
        }
      }
    },

    selectDataSetName(val, idx) {
      // logInfo("下拉事件", val, idx, this.hasParam);
      if (!this.hasParam) {
        let id = this.dataSetNameId;
        this.data = store.state.dataSet[id];
        // console.log(id, this.data, this.dataId, "下拉请求");
        this.dataId = "";
        this.chartProperties["dataSetNameId"] = val;
      } else {
        if (idx != null) {
          this.dataIdArr[idx].dataSetNameId = val;
          this.dataIdArr[idx].dataId = "";
          this.dataArr[idx] = store.state.dataSet[val];
          // console.log("dataIdArr=", this.dataIdArr);
          // console.log("dataArr=", this.dataArr);
        }
      }
    },
    selectDataId(val, index) {
      // console.log(val, index);
      if (!this.hasParam) {
        this.chartProperties["dataId"] = val;
      } else {
        if (index != null) {
          this.dataArr[index].dataId = val;
          // console.log("dataArr=", this.dataArr);
        }
      }
    },
    selectChang(val, index) {
      // console.log(val, index, "遥测下拉");
      this.selectid2 = "";
      this.chartProperties["dataSetNameId"] = val;
      if (val) {
        this.getSelectList(val);
      }
    },
    getSelectList(val) {
      let newMsg = {
        webMsgType: 1008,
        funCode: 0,
      };
      newMsg.data = { gw_sn: val };
      this.mySpecialId = publishMsg(newMsg);
    },
    saveDataBtn() {
      const contextData = {};

      let param = {};
      if (this.hasParam) {
        param = this.dataIdArr;
      } else {
        param = this.chartProperties;
      }

      const params = {
        chartType: this.chartType,
        setCode: "",
        chartProperties: param,
        contextData,
      };
      // console.log(params, "传出的");
      this.$emit("input", params);
      this.$emit("change", params);
    },
    onMessage(topic, msg) {
      //console.log("正在监听--遥测页面数据", topic, msg);
      if (msg.webMsgType === 1008) {
        switch (msg.funCode) {
          case 0:
            if (this.mySpecialId == msg["specialId"]) {
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.selectList2 = [];
              let list = [{ name: "全选", id: "all" }];
              msg.data.forEach((e) => {
                list.push(e);
              });
              this.selectList2 = list;
            }
            break;

          default:
            break;
        }
      }
      // if (msg.webMsgType === 1010) {
      //   switch (msg.funCode) {
      //     case 0:
      //       if (msg.retCode != 0 || !msg.data) {
      //         return this.$message.error(msg.retMsg);
      //       }
      //       this.TableList = msg.data;
      //       this.loadingShow = false;
      //       break;
      //     case 1:
      //       if (msg.retCode != 0) {
      //         return this.$message.error(msg.retMsg);
      //       }
      //       break;
      //     case 2:
      //       if (msg.retCode != 0 || !msg.data) {
      //         return this.$message.error(msg.retMsg);
      //       }
      //       // //console.log(msg.data)

      //       for (let i = 0; i < this.TableList.length; i++) {
      //         for (let j = 0; j < msg.data.length; j++) {
      //           if (this.TableList[i].id === msg.data[j].id) {
      //             // this.TableList[i] = {...msg.data[j]}
      //             this.TableList[i].id = msg.data[j].id;
      //             this.TableList[i].value = msg.data[j].value;
      //             this.TableList[i].update_time = msg.data[j].update_time;
      //           }
      //         }
      //       }

      //       break;
      //     case 3:
      //       if (msg.retCode != 0 || !msg.data) {
      //         return this.$message.error(msg.retMsg);
      //       } else {
      //         //console.log(msg.data);
      //         let base64Data = msg.data.base64_excel;
      //         dataURLtoBlob(base64Data, "遥测数据列表");
      //       }
      //       break;
      //     case 4:
      //       if (msg.retCode != 0) {
      //         return this.$message.error(msg.retMsg);
      //       }
      //       this.$message.success(msg.retMsg);
      //       break;
      //     default:
      //       break;
      //   }
      // }
    },
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="sass" scoped></style>
